<script setup>
import imgRobotA from '@/assets/image/staff/1.png'
import imgRobotB from '@/assets/image/staff/2.png'
import imgRobotC from '@/assets/image/staff/3.png'
import imgRobotD from '@/assets/image/staff/4.png'
import imgRobotE from '@/assets/image/staff/5.png'
import imgRobotF from '@/assets/image/staff/6.png'
import imgRobotG from '@/assets/image/staff/7.png'
import imgRobotH from '@/assets/image/staff/8.png'
import imgRobotI from '@/assets/image/staff/9.png'
import imgTargetArrowSingle from '@/assets/image/staff/arrow-single.png'
import imgTargetArrowDouble from '@/assets/image/staff/arrow-double.png'

const props = defineProps({
  status: {
    type: Object,
    default: () => ({}),
  },
})

const state = reactive({
  robotOptions: [
    {
      label: '碎纸员工',
      type: 'a',
      status: 'free',
      id: '1767024980569427976',
      arrows: ['r'],

    },
    {
      label: '打包员工',
      type: 'b',
      status: 'free',
      id: '1767024980569427978',
      arrows: ['r'],

    },
    {
      label: '缠膜员工',
      type: 'c',
      status: 'free',
      id: '1767024980569427972',
      arrows: ['b'],
    },
    {
      label: '自动立库',
      type: 'd',
      status: 'free',
      id: '1767024980569427971',
      arrows: ['rl'],
    },
    {
      label: '复合输送线',
      type: 'e',
      status: 'free',
      id: '1767024980569427969',
      arrows: ['bt', 'bl'],
    },
    {
      label: '机械臂机器人',
      type: 'f',
      status: 'free',
      id: '1767024980569427973',
      arrows: ['l'],
    },
    {
      label: '桁架机器人',
      type: 'g',
      status: 'free',
      id: '1767024980569427975',
      arrows: [],

    },
    {
      label: '潜伏式AGV',
      type: 'h',
      status: 'free',
      id: '1767024980569427974',
      arrows: ['rl'],
    },
    {
      label: '碎磁员工',
      type: 'i',
      status: 'free',
      id: '1767024980569427977',
      arrows: [],
    },
  ],
})
watch(() => props.status, (newVal) => {
  state.robotOptions.forEach((item) => {
    if(newVal.data.runningRobotIdList.includes(item.id)) {
      item.status = 'run'
    }
  })
})

const robotImageMap = {
  a: imgRobotA,
  b: imgRobotB,
  c: imgRobotC,
  d: imgRobotD,
  e: imgRobotE,
  f: imgRobotF,
  g: imgRobotG,
  h: imgRobotH,
  i: imgRobotI,
}

const { robotOptions } = toRefs(state)
</script>

<template>
  <section class="task-flow">
    <div class="task-flow__wrap">
      <div v-for="(item) in robotOptions" :key="item.id" class="task-flow__item" :class="item.status">
        <div class="task-flow__item-wrap">
          <div class="item-info">
            <div class="item-info__title">
              {{ item.label }}
            </div>
            <div class="item-info__status" :class="item.status">
              {{ item.status === 'run' ? '作业' : '空闲' }}
            </div>
          </div>
          <div class="item-image">
            <n-image
              class="ui-tab__icon"
              height="100%"
              width="100%"
              :src="robotImageMap[item.type]"
              preview-disabled
            />
          </div>
        </div>
        <div v-for="(arrow, index) in item.arrows" :key="index" class="task-flow__item-arrow" :class="arrow">
          <n-image
            class="target-arrow-image"
            height="100%"
            width="100%"
            :src="['rl', 'bt'].indexOf(arrow) === -1 ? imgTargetArrowSingle : imgTargetArrowDouble"
            preview-disabled
          />
        </div>
      </div>
    </div>
  </section>
</template>

<style lang='scss' scoped>
.task-flow {
  height: 100%;
  background-image: linear-gradient(90deg, #009de333 0%, #009DE329 100%);

  &__wrap {
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 48px;
    align-content: center;
    height: 100%;
    padding: 45px 20px;
    overflow: hidden;
  }

  &__item {
    position: relative;
    padding: 10px;
    background: rgb(0 157 227 / 20%);
    border: 3px solid #009de3;

    &.free {
      filter: grayscale(0.25) brightness(0.75);
    }

    &-wrap {
      display: flex;
      flex-direction: column;

      .item-info {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 10px;

        &__title {
          font-size: 16px;
        }

        &__status {
          font-size: 14px;
          // color: #fff;
          border-radius: 5px;

          &::before {
            display: inline-block;
            width: 10px;
            height: 10px;
            margin-right: 5px;
            content: '';
            border-radius: 50%;
          }

          &.run::before {
            background-color: #00B2FF;
          }

          &.free::before {
            background-color: #2DE0A0;
          }
        }
      }

      .item-image {
        flex: 1;
        min-height: 0;

        :deep(.n-image) {
          display: flex;
          width: 100%;
          border-radius: 2px;
        }
      }
    }

    &-arrow {
      position: absolute;
      display: inline-flex;
      width: 48px;

      :deep(.n-image) {
        display: flex;
        width: 100%;
      }

      &.r, &.rl {
        top: 50%;
        left: 100%;
        transform: translate(0, -50%) rotate(0deg);
      }

      &.l {
        top: 50%;
        right: 100%;
        transform: translate(0, -50%) rotate(180deg);
      }

      &.bl {
        top: 100%;
        right: 100%;
        transform: rotate(135deg);
      }

      &.b, &.bt {
        top: 100%;
        left: 50%;
        transform: translate(-50%, 0) rotate(90deg);
      }

      &.rl {
        transform: translate(3px, -50%);
      }

      &.bt {
        transform: translate(-50%, 8px) rotate(90deg);
      }
    }
  }
}
</style>
